<template>
    <div class="map-container">
        <router-link to="/big"> <img src="@/static/leftbtn.jpg" class="return" alt=""></router-link>

        <img src="@/static/process1-1.jpg" alt="" class="map">
        <div :class="stonestyle[index]" :style="'width:' + item[0] + ';left:' + item[1] + '%;top:' + item[2] + '%;'"
            alt="" v-for="(item, index) in stonearea" @click="gotoprocessdetail(index + 1 + 23 * route.query.number)">
            <div class="num"> {{ index + 1 + 23 * route.query.number }}</div>

            <img :src="imgs[(index) % 5]" class=" stoneimg">
        </div>

    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import api from '@/api/user'
import { message } from 'ant-design-vue';
import { useAuthStore } from '../../store/index';
const store = useAuthStore();
const route = useRoute();
const router = useRouter();
const nowstep = ref();
const stonestyle = ref([]);
const mowday = ref();
const imgs = ref([new URL('../../static/stone1.jpg', import.meta.url).href, new URL('../../static/stone2.jpg', import.meta.url).href, new URL('../../static/stone3.jpg', import.meta.url).href, new URL('../../static/stone4.jpg', import.meta.url).href, new URL('../../static/stone5.jpg', import.meta.url).href])
const stonearea = ref([[9, 1, 18], [2, 2, 37], [8, 1, 56], [8, 6, 67], [9, 15, 63], [9, 14, 47], [9, 12, 30], [9, 21, 12], [9, 41, 10], [9, 52, 24], [10, 30, 30], [10, 23, 49], [10, 28, 64], [9, 39, 56], [9, 47, 43], [10, 54, 62], [10, 63, 53], [10, 64, 37], [10, 66, 19], [9, 78, 13], [10, 88, 27], [10, 78, 42], [9, 88, 64]])
onMounted(async () => {
    store.settopics([]);
    store.resetnowtopic();
    store.setcorrectnum(0);
    for (var i = 0; i < 24; i++) {
        stonestyle.value.push("stonelock");
    }
    await api.getprocess()
        .then((res) => {
            console.log(res.data);
            mowday.value = res.data.levelProcessId;
            store.setnowlevel(mowday.value);
            console.log(store.nowlevel);
            if (res.data.remainingLevels == -1 || res.data.remainingLevels == 0) {
                nowstep.value = res.data.endNum
            } else {
                nowstep.value = res.data.endNum - res.data.remainingLevels + 1;
            }
            console.log(nowstep.value);
            for (var i = 0; i < 24; i++) {
                if ((i + 1 + 23 * route.query.number) <= nowstep.value) {
                    stonestyle.value[i] = "stone";
                }
            }
            // if (Math.ceil(nowstep.value / 23) != route.query.number) {
            //     stonestyle.value[nowstep.value % 23 - 1] = "stone anim";
            // }

        })
})
const gotoprocessdetail = (index) => {
    console.log(nowstep.value);
    console.log(index);
    if (Math.floor(index / 23) == 3) {
        let processnum
        if ((index % 23 - 2) > 0) {
            processnum = Math.floor(index / 23) * 8 + Math.ceil((index % 23 - 2) / 3) + 1;
        } else {
            processnum = Math.floor(index / 23) * 8 + 1;
        }
        if (index == 23 || index == 46 || index == 69 || index == 92) {
            processnum--;
        }
        console.log("processnum" + processnum);
        if (index % 23 <= 2) {
            if (index % 23 == 1) {
                if (index <= nowstep.value) {
                    router.push({
                        path: "/detail2",
                        query: {
                            processnum: processnum
                        }
                    });
                } else {
                    message.error("请先完成当前关卡")
                }
            } else {
                console.log(index, nowstep.value);
                if (index <= nowstep.value) {
                    router.push({
                        path: "/game",
                        query: {
                            processnum: processnum
                        }
                    });
                } else {
                    message.error("请先完成当前关卡")
                }

            }
        } else {



            if ((index % 23 - 2) % 3 == 1) {
                console.log(index == nowstep.value);
                if (index == nowstep.value) {
                    router.push({
                        path: "/gonggu",
                        query: {
                            processnum: processnum
                        }
                    });
                } else {
                    message.info("本关为巩固请选择别的关卡")
                }

            } else if ((index % 23 - 2) % 3 == 2) {
                if (index <= nowstep.value) {
                    router.push({
                        path: "/detail2",
                        query: {
                            processnum: processnum
                        }
                    });
                } else {
                    message.error("请先完成当前关卡")
                }
            } else if ((index % 23 - 2) % 3 == 0) {
                if (index <= nowstep.value) {
                    router.push({
                        path: "/game",
                        query: {
                            processnum: processnum
                        }
                    });
                } else {
                    message.error("请先完成当前关卡")
                }

            }
        }
    } else {
        let processnum
        if ((index % 23 - 2) > 0) {
            processnum = Math.floor(index / 23) * 8 + Math.ceil((index % 23 - 2) / 3) + 1;
        } else {
            processnum = Math.floor(index / 23) * 8 + 1;
        }
        if (index == 23 || index == 46 || index == 69 || index == 92) {
            processnum--;
        }
        console.log("processnum" + processnum);
        if (index % 23 <= 2) {
            if (index % 23 == 1) {
                if (index <= nowstep.value) {
                    router.push({
                        path: "/detail1",
                        query: {
                            processnum: processnum
                        }
                    });
                } else {
                    message.error("请先完成当前关卡")
                }
            } else {
                if (index <= nowstep.value) {
                    router.push({
                        path: "/game",
                        query: {
                            processnum: processnum
                        }
                    });
                } else {
                    message.error("请先完成当前关卡")
                }

            }
        } else {
            if ((index % 23 - 2) % 3 == 1) {
                if (index == nowstep.value) {
                    router.push({
                        path: "/gonggu",
                        query: {
                            processnum: processnum
                        }
                    });
                } else
                    message.info("本关为巩固请选择别的管卡")
            } else if ((index % 23 - 2) % 3 == 2) {
                if (index <= nowstep.value) {
                    router.push({
                        path: "/detail1",
                        query: {
                            processnum: processnum
                        }
                    });
                } else {
                    message.error("请先完成当前关卡")
                }
            } else if ((index % 23 - 2) % 3 == 0) {
                if (index <= nowstep.value) {
                    router.push({
                        path: "/game",
                        query: {
                            processnum: processnum
                        }
                    });
                } else {
                    message.error("请先完成当前关卡")
                }

            }
        }
    }



}
</script>
<style lang="scss" scoped>
.map-container {
    position: relative;
    width: 100%;

    .return {
        position: absolute;
        left: 3rem;
        top: 3rem;
        height: 4rem;

    }

    .map {
        display: block;

        width: 100%;
    }

    .stonelock {
        width: 9%;
        position: absolute;
        left: 1%;
        top: 18%;

        .num {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 4rem;
            color: red;
            font-weight: 800;
        }

        img {

            width: 100%;
        }
    }

    .stonelock::after {
        content: "";
        position: absolute;
        top: 50%;
        /* 垂直居中 */
        left: 50%;

        /* 水平居中 */
        width: 4rem;
        /* 图片宽度，根据需要调整 */
        height: 4rem;
        /* 图片高度，根据需要调整 */
        background-image: url("@/static/lock.png");
        /* 添加图片 */
        background-size: contain;
        /* 确保图片完整显示 */
        background-repeat: no-repeat;
        /* 防止背景重复 */
        background-position: center;
        /* 图片居中 */
        transform: translate(-50%, -50%);
        /* 使用 transform 实现绝对居中 */


    }

    .stone {
        width: 9%;
        position: absolute;
        left: 1%;
        top: 18%;

        .num {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 4rem;
            color: red;
            font-weight: 800;
        }

        img {

            width: 100%;
        }
    }

    .anim {
        animation: scale 1s infinite alternate;
    }

    @keyframes scale {
        0% {
            transform: scale(1);
        }

        100% {
            transform: scale(1.2);
        }
    }
}
</style>